<template>
	<view>
		<view v-if="hasLogin" class="hello">
			<view class="admin-wallpaper">
				<view class="admin">
					<navigator url="/pages/login/login">
						<image src="/static/login.png" mode="" />
					</navigator>
				</view>

				<view class="admin-login">
					<text>{{userName}}</text>
				</view>
			</view>


			<view class="integration">
				<view class="integral">
					<navigator url="/pages/integration/integration">
						<image src="../../static/integral.png" mode=""></image>
					</navigator>

					<text style="color: #AAAAAA;">我的积分</text>
				</view>
				<view class="int-store">
					<navigator url="/pages/store/store">
					<image src="../../static/store.png" mode=""></image>
					</navigator>
					

					<text style="color: #AAAAAA;">积分商城</text>
				</view>
			</view>

			<view class="cu-list menu">
				<view class="cu-item arrow" v-for="(item,index) in list" :key="index">
					<navigator class="content" hover-class="none" :url="item.url">
						<text :class="item.icon"></text>
						<text class="text-grey">{{item.text}}</text>
					</navigator>
				</view>

				<navigator class="content" hover-class="none" url="../login/login">
					<view class="padding flex flex-direction margin-bottom-xl">
						<button class="cu-btn line-red margin-tb-sm lg">退出登陆</button>
					</view>
				</navigator>

			</view>

		</view>

		<view v-if="!hasLogin" class="hello">
			<view class="admin">
				<navigator url="/pages/login/login">
					<image src="/static/login.png" mode="" />
				</navigator>
			</view>

			<view class="admin-login">
				<text>未登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				integral: "200",
				index: 0,
				list: [{
						icon: 'cuIcon-form text-blue',
						text: '问题反馈',
						url: '/pages/user/feedback',
					},
					{
						icon: 'cuIcon-question text-pink',
						text: '公告',
						url: '/pages/user/news',
					},
					{
						icon: 'cuIcon-usefull text-cyan',
						text: '关于',
						url: '/pages/user/about',
					},
				]
			}
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		onShow() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '../login/login'
				});
			}
		},
		goTointegration() {
			uni.navigateTo({
				url: '../integration/integration'
			});
		},
		goTostore() {
			uni.navigateTo({
				url: '../store/store'
			});
		}
	}
</script>

<style>
	.admin image {
		width: 160rpx;
		height: 160rpx;
		margin: 50rpx 0 0 300rpx;
	}

	.admin-login {
		margin: 20rpx 0 0 320rpx;
	}

	.integration {
		border: solid 1rpx #d6d6d6;
		display: flex;
		margin: 20rpx 78rpx;
		width: 80%;
	}


	.integration text {
		width: 130rpx;
		display: block;
		font-size: 28rpx;
	}


	.integration image {
		width: 95rpx;
		height: 95rpx;
	}


	.integral,
	.int-store {
		margin: 0 93rpx;
		flex: 1;
	}

	.arrow {
		margin: 50rpx 78rpx;
		width: 80%;
	}

	.content {
		width: 100%;
		height: 75rpx;
		border-bottom: solid 1rpx #d4d4d4;
		margin-top: 20rpx;
		padding-top: 10rpx;
		font-size: 40rpx;
	}
</style>